<template>
  <div v-if="params.id && status === 'create'">
    <a-descriptions size="medium" :align="{ label: 'right' }">
      <a-descriptions-item label="渠道名称">{{ form.sourceName }}</a-descriptions-item>
      <a-descriptions-item v-if="form.sourceId === 2" label="悟空加盟商ID">{{ form.groupId }}</a-descriptions-item>
      <a-descriptions-item v-if="!directChannel" label="渠道账号">{{ form.username }}</a-descriptions-item>
      <a-descriptions-item v-if="!directChannel" label="渠道密码">**********</a-descriptions-item>
      <a-descriptions-item label="运营主体">{{ form.subject }}</a-descriptions-item>
      <a-descriptions-item label="平台抽佣比">{{ form.commissionRate || '-' }} %</a-descriptions-item>
    </a-descriptions>
  </div>
  <page-form-row v-if="!params.id || status === 'edit'">
    <page-form-item label="渠道名称" field="sourceId" required>
      <a-select v-model="form.sourceId" placeholder="请选择" allow-clear @change="onSelectChange" :disabled="params.id">
        <a-option v-for="item in dict.thirdpartySourceEnum" :key="item.value" :value="item.value">
          {{ item.label }}
        </a-option>
      </a-select>
    </page-form-item>
    <page-form-item v-if="form.sourceId === 2" label="悟空加盟商ID" labelTooltipContent="悟空平台JM开头ID" field="groupId" required>
      <i-input v-model="form.groupId" placeholder="请输入" :max-length="30" />
    </page-form-item>
    <page-form-item v-if="!directChannel" label="渠道账号" field="username" required>
      <i-input v-model="form.username" placeholder="请输入" :max-length="30" autocomplete="new-password" />
    </page-form-item>
    <page-form-item v-if="!directChannel" label="渠道密码" field="password" required>
      <a-input-password v-model="form.password" placeholder="请输入" :max-length="20" allow-clear autocomplete="new-password" />
    </page-form-item>
    <page-form-item label="运营主体" field="subject" required>
      <i-input v-model="form.subject" placeholder="请输入" :max-length="20" />
    </page-form-item>
    <page-form-item
      label="平台抽佣比"
      labelTooltipContent="输入抽佣比例，根据平台实际订单金额（去除平台承担优惠）计算平台佣金"
      field="commissionRate"
    >
      <i-input-number v-model="form.commissionRate" :min="0" :max="100" placeholder="请输入">
        <template #append> % </template>
      </i-input-number>
    </page-form-item>
  </page-form-row>

  <div v-if="shouldShowAccountInfo" class="w-full account-info-desc">
    <div class="desc-item" v-for="item in stepList" :key="item.step">
      <div class="flex desc-item-label">
        <div class="circle">{{ item.step }}</div>
        <div class="step-text">{{ item.text }}</div>
      </div>
      <div class="desc-item-value">
        <template v-for="content in item.content" :key="content.value">
          <span :style="{ color: content.color }">{{ content.value }}</span>
        </template>

        <div class="flex mt-3">
          <div class="flex gap-x-4 mr-4" v-if="item?.imgList?.length > 0">
            <template v-for="img in item.imgList" :key="img.value">
              <div class="flex flex-col items-center">
                <img :style="{ width: img.width + 'px' }" :src="img.img" :alt="img.value" />
                <span class="text-xs">{{ img.value }}</span>
              </div>
            </template>
          </div>

          <div class="flex flex-col justify-center gap-y-1 custom-name-list" v-if="item?.nameList?.length > 0">
            <template v-for="name in item.nameList" :key="name.value">
              <div :style="{ color: name.color }">{{ name.value }}</div>
              <template v-for="child in name.children" :key="child.value">
                <div :style="{ color: child.color }">{{ child.value }}</div>
              </template>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { txTips, fzTips } from '../const'

  import { inject, ref, onMounted, computed } from 'vue'
  import { useRoute } from 'vue-router'
  import { getOtaDetail } from '@/api/business/ota'
  import { usePageDict } from '@/hooks/useDict'

  const route = useRoute()
  const { params, query } = route
  console.log(route, 'account-info')

  const stepList = ref<any[]>([])

  const props = defineProps({
    status: String,
  })
  const accountInfo = ref()
  const form = ref(inject<any>('form'))
  const dict = usePageDict('otaChannelDict', false)
  const emits = defineEmits(['selectValue'])

  // 直连渠道 铁行 飞租
  const directChannel = computed<boolean>(() => {
    return form.value.sourceId && (form.value.sourceId == 7 || form.value.sourceId == 8)
  })

  // 直连渠道 账号状态 开通中
  const accountStatus = computed<boolean>(() => {
    return accountInfo.value?.status == 3
  })

  /**
   * 1. 创建时，directChannel为true，展示
   * 2. 编辑-查看/修改时，directChannel为true，accountStatus为true，展示
   */
  const shouldShowAccountInfo = computed<boolean>(() => {
    return (!params.id && directChannel.value) || (directChannel.value && accountStatus.value) // 新增/编辑-查看/修改
  })

  const onSelectChange = (value: any) => {
    if (value == 7) {
      stepList.value = txTips
    } else if (value == 8) {
      stepList.value = fzTips
    } else {
      stepList.value = []
    }

    const source = dict.thirdpartySourceEnum.find((item: any) => item.value === value)
    emits('selectValue', source)
  }

  const loadData = () => {
    getOtaDetail({ id: params.id }).then((res: any) => {
      const { result } = res
      accountInfo.value = result
      form.value.id = result.id
      form.value.sourceName = result.sourceName
      form.value.sourceId = result.sourceId
      form.value.groupId = result.groupId
      form.value.username = result.username
      form.value.password = result.password
      form.value.subject = result.subject
      form.value.commissionRate = result.commissionRate
    })
  }

  onMounted(() => {
    if (params.id) {
      if (query.sourceId == '7') {
        stepList.value = txTips
      } else if (query.sourceId == '8') {
        stepList.value = fzTips
      }
      loadData()
    }
  })

  defineExpose({
    loadData,
  })
</script>

<style lang="less" scoped>
  .account-info-desc {
    background-color: #f7f8fa;
    padding: 23px 20px;
    font-weight: 400;
    font-size: 14px;

    .desc-item {
      margin-bottom: 16px;

      &:last-child {
        margin-bottom: 0;
      }

      .desc-item-label {
        display: flex;
        align-items: center;
        font-weight: 600;
        color: #165dff;

        .circle {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 16px;
          height: 16px;
          background-color: #165dff;
          color: #fff;
          border-radius: 50%;
          margin-right: 8px;
        }
      }

      .desc-item-value {
        padding-left: 24px;

        .custom-name-list {
          width: 220px;
          height: 110px;
          padding: 20px 20px;
          border: 1px solid #e4e4e4;
          background-color: #fff;
        }
      }
    }
  }
</style>
